<template>
  <div style="margin: 20px">
    <el-tabs type="border-card" style="height: 90vh;">
      <el-tab-pane v-for="(item, index) in foodLists" :label="item.name" :key="index">
        <!--        <p v-for="(item1, index) in item.foodList" :key="index">{{item1.foodName}}</p>-->
        <el-card :body-style="{ padding: '0px' }" style="width: 365px;height: 160px;float: left;margin: 10px 20px 20px 0" v-for="(item1, index) in item.foodList" :key="index" >
          <img :src="getImg(item1.savepath)" width="150" class="image" style="float: left">
          <div style="padding: 14px;float: left" >
            <span style="font-weight: 600">{{item1.foodName}}</span>
            <br><br>
            <p style="color: #f48379">￥{{item1.price}}元</p>
            <br>
<!--            <el-input-number size="mini" v-model="num" @change="numHandleChange" :min="0" :max="99" label="描述文字"></el-input-number>-->
            <el-button @click="asToOrder(item1, 'sub')" :disabled="item1.num == 0">-</el-button>
            <el-button>{{item1.num}}</el-button>
            <el-button @click="asToOrder(item1, 'add')" :disabled="item1.num == 99">+</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-button @click="drawerShow" icon="el-icon-shopping-cart-2" class="countButton">￥{{count}}</el-button>
    </el-tabs>

    <el-drawer
      title="我是标题"
      size="25%"
      :visible.sync="drawer"
      :with-header="false">
      <div style="height: 80vh;overflow: auto">
        <el-card v-for="(item, index) in orders" :key="index" :body-style="{ padding: '0px' }" style="width: 365px;height: 160px;float: left;margin: 10px 20px 20px 0"  >
          <img :src="getImg(item.savepath)" width="150" class="image" style="float: left">
          <div style="padding: 14px;float: left" >
            <span style="font-weight: 600">{{item.foodName}}</span>
            <br><br>
            <p style="color: #f48379">￥{{item.price}}元</p>
            <br>
            <!--            <el-input-number size="mini" v-model="num" @change="numHandleChange" :min="0" :max="99" label="描述文字"></el-input-number>-->
            <el-button @click="asToOrder(item, 'sub')" :disabled="item.num == 1">-</el-button>
            <el-button>{{item.num}}</el-button>
            <el-button @click="asToOrder(item, 'add')" :disabled="item.num == 99">+</el-button>
          </div>
        </el-card>
      </div>
      <el-input
        style="margin: 0 10px 0 10px;width: 320px"
        type="textarea"
        :rows="1"
        placeholder="备注"
        v-model="remarks"
        >
      </el-input>
      <el-card>
        <el-button-group style="width: 100%">
          <el-button style="background-color: #ea0000;color: #d9d9d9;width: 50%;height: 80px" @click="confirmFood">确定菜品</el-button>
          <el-button style="background-color: #383838;color: #d9d9d9;width: 50%;height: 80px">总价：{{count}}￥</el-button>
        </el-button-group>

      </el-card>
    </el-drawer>


    <el-dialog
      title="确定订单信息"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose">
      <el-card  shadow="never" :body-style="{ padding: '0px' }">
        <div>
          <el-table :data="orders" height="400">
            <el-table-column
              prop="savepath"
              width="180">
              <template slot-scope="scope">
                <img :src="getImg(scope.row.savepath)" width="80"/>
              </template>
            </el-table-column>
            <el-table-column
              width="180">
              <template slot-scope="scope">
                <p>{{scope.row.foodName}}</p>
                <p>￥{{scope.row.price}}/份</p>
              </template>
            </el-table-column>
            <el-table-column
              width="180">
              <template slot-scope="scope">
                <p>x{{scope.row.num}}份</p>
              </template>
            </el-table-column>
            <el-table-column
              width="180">
              <template slot-scope="scope">
                <p>￥{{scope.row.num * scope.row.price}}元</p>
              </template>
            </el-table-column>
          </el-table>
          <p>*备注：{{remarks}}</p>
          <span style="color: #f48651;font-size: 25px">合计：{{count}}元</span>
          <el-button @click="dialogVisible = false, drawer = false">继续加菜</el-button>
          <el-button @click="addToOrder(0)">确认下单</el-button>
          <br><br>
          <el-button type="danger" @click="payShow = true">立即支付</el-button>
        </div>
      </el-card>
    </el-dialog>

    <el-dialog
      style="text-align: center"
      title="扫码支付"
      :visible.sync="payShow"
      width="30%"
      :before-close="handleClose">
      <p>订单总金额：<span style="color: #f48651;font-size: 25px">{{count}}元</span></p>
      <img src="../../pic/code.png" width="350" />
      <br>
      <el-button @click="addToOrder(1)">支付成功（模拟完成）</el-button>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "orderFood",
  data(){
    return{
      user: JSON.parse(localStorage.getItem("user")),
      label:"",
      foodLists: [],
      // num: 0,
      count: 0,
      drawer: false,
      orders:[],
      remarks:"",
      dialogVisible: false,
      payShow: false,

    }
  },
  mounted() {
    this.getAll()
  },
  methods:{
    drawerShow() {
      if (this.orders.length == 0) {
        this.$message.error("请先选择食品！")
      }else {
        this.drawer = true
      }
    },
    // payNow(){
    //   this.axios.post("http://localhost:8080/order/add?id="+this.user.id+"&orderRemarks="+this.remarks+"&sum="+this.count, this.orders).then(res => {
    //     console.info(res.data)
    //     if (res.data.code == 200) {
    //       this.
    //     }
    //   })
    // },
    addToOrder(o){
      // console.info(this.orders)
      this.axios.post("http://localhost:8080/order/add?id="+this.user.id+"&orderRemarks="+this.remarks+"&sum="+this.count+"&opera="+o, this.orders).then(res => {
        console.info(res.data)
        if (res.data.code == 200) {
          if (o == 0){
            this.$message.success("下单成功！")
          }else {
            this.$message.success("支付成功！")
          }
          this.dialogVisible = false
          this.payShow = false
          this.drawer = false
          this.orders = []
          this.count = 0
          this.remarks = ""
          for (let i = 0; i < this.foodLists.length; i++) {
            // console.info(i)
            for (let j = 0; j < this.foodLists[i].foodList.length; j++) {
              // console.info(j)
              this.$set(this.foodLists[i].foodList[j], "num", 0)
            }
          }
        }
      })
    },
    confirmFood(){
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.drawer = false
          done();
        })
        .catch(_ => {});
    },
    asToOrder(i, o) {

      if (o == 'add') {
        i.num += 1
        this.count += i.price
      }else {
        i.num -= 1
        this.count -= i.price
      }

      if (!this.orders.includes(i)){
        this.orders.push(i)
      }

      console.info(this.or)
    },

    getImg(path){
      // console.info("http://localhost:8080/pic/" + path)
      return "http://localhost:8080/pic/" + path
    },
    getAll(){
      this.axios.get("http://localhost:8080/type/getAll").then(res => {
        this.foodLists = res.data.data
        // this.$set(this.foodLists[1].foodList[0], "num", 11)
        // console.info("12",res.data.data[1].foodList[0])
        for (let i = 0; i < this.foodLists.length; i++) {
          // console.info(i)
          for (let j = 0; j < this.foodLists[i].foodList.length; j++) {
            // console.info(j)
            this.$set(this.foodLists[i].foodList[j], "num", 0)
          }
        }
        // this.foodLists = res.data.data
        //
        // console.info("1", this.foodLists)
      })
    }
  }
}
</script>

<style scoped>
.countButton{
  position: fixed;
  bottom: 120px;
  right: 120px;
  border-radius: 20px;
  width: 180px;
  background-color: #8c939d;
  color: white
}
</style>
